<?php /*a:1:{s:73:"E:\M_PROGECT\Test\API_dolphinphp\application\index\view\index\setmap.html";i:1586922825;}*/ ?>
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=TP8aOHeKrrfFDqqp6LNa3ltxGlWsiDQN"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var id = '<?php echo htmlentities(app('request')->get('id')); ?>'
    var app = new Vue({
        el: '#container',
        data: {
            map_data :[],
            map_zuobiao:[],
            date:''
        },
        methods: {
            //获取数据
            getData(){
                let _that = this
                axios.get('/api/fexcel/index?id='+id)
                    .then(function (response) {
                        _that.map_data = response.data.data
                        _that.map_zuobiao = response.data.zuobiao
                        _that.date = response.data.date

                        let sEchart = echarts.init(document.getElementById("container"))
                        _that.drawLine(sEchart);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            drawLine(mychart){
                var app = {};option = null;
                var data = this.map_data;
                var geoCoordMap = this.map_zuobiao;
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value),
                                num: geoCoordMap[data[i].value]
                            });
                        }
                    }
                    return res;
                };
                option = {
                    title: {
                        text: '邮政快递区域统计图 - 百度地图',
                        subtext: '数据日期-'+this.date,
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: function (params) {
                            return  params.seriesName+'：' +params.name+'<br/>快递量：'+params.value[2]+'件'
                        }
                    },
                    visualMap: {
                        calculable: true,
                        realtime:true,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    // visualMap: {
                    //     min: 0,
                    //     max: 300,
                    //     splitNumber: 5,
                    //     color: ['#d94e5d','#eac736','#50a3ba'],
                    //     textStyle: {
                    //         color: '#fff'
                    //     }
                    // },
                    bmap: {
                        center: [87.636361, 43.90631],
                        zoom: 13,
                        roam: true,
                        mapStyle:{style:'midnight'},
                        // mapStyle: {
                        //     styleJson: [{
                        //         'featureType': 'water',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'color': '#d1d1d1'
                        //         }
                        //     }, {
                        //         'featureType': 'land',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'color': '#f3f3f3'
                        //         }
                        //     }, {
                        //         'featureType': 'railway',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'visibility': 'off'
                        //         }
                        //     }, {
                        //         'featureType': 'highway',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'color': '#fdfdfd'
                        //         }
                        //     }, {
                        //         'featureType': 'highway',
                        //         'elementType': 'labels',
                        //         'stylers': {
                        //             'visibility': 'off'
                        //         }
                        //     }, {
                        //         'featureType': 'arterial',
                        //         'elementType': 'geometry',
                        //         'stylers': {
                        //             'color': '#fefefe'
                        //         }
                        //     }, {
                        //         'featureType': 'arterial',
                        //         'elementType': 'geometry.fill',
                        //         'stylers': {
                        //             'color': '#fefefe'
                        //         }
                        //     }, {
                        //         'featureType': 'poi',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'visibility': 'off'
                        //         }
                        //     }, {
                        //         'featureType': 'green',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'visibility': 'off'
                        //         }
                        //     }, {
                        //         'featureType': 'subway',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'visibility': 'off'
                        //         }
                        //     }, {
                        //         'featureType': 'manmade',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'color': '#d1d1d1'
                        //         }
                        //     }, {
                        //         'featureType': 'local',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'color': '#d1d1d1'
                        //         }
                        //     }, {
                        //         'featureType': 'arterial',
                        //         'elementType': 'labels',
                        //         'stylers': {
                        //             'visibility': 'off'
                        //         }
                        //     }, {
                        //         'featureType': 'boundary',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'color': '#fefefe'
                        //         }
                        //     }, {
                        //         'featureType': 'building',
                        //         'elementType': 'all',
                        //         'stylers': {
                        //             'color': '#d1d1d1'
                        //         }
                        //     }, {
                        //         'featureType': 'label',
                        //         'elementType': 'labels.text.fill',
                        //         'stylers': {
                        //             'color': '#999999'
                        //         }
                        //     }]
                        // }
                    },
                    series : [
                        {
                            name: '地点',
                            type: 'scatter',
                            coordinateSystem: 'bmap',
                            data: convertData(data),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            label: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            itemStyle: {
                                color: 'purple'
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        {
                            name: 'Top 5',
                            type: 'effectScatter',
                            coordinateSystem: 'bmap',
                            data: convertData(data.sort(function (a, b) {
                                return b.value - a.value;
                            }).slice(0, 5)),
                            symbolSize: function (val) {
                                return val[2] / 11;
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            label: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            itemStyle: {
                                color: 'purple',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            },
                            zlevel: 1
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    mychart.setOption(option, true);
                }
            }
        },
        mounted(){
            this.getData();
        },
        created(){

        }
    })
</script>
</body>
</html>